<template>
  <div class="chat-gpt-records">
    <div v-for="(item, index) in messageRecords" :key="index" class="message-item" :class="[item.chatRole === 1 ? 'user' : 'gpt']">
      <div class="avatar">
        <img v-if="item.chatRole === 2" src="@/assets/img/admin/learning-case/gpt-avatar.svg" alt="gpt" />
        <div v-if="item.chatRole === 1" class="name w-36 h-36 p-6">{{ name.slice(-2) }}</div>
      </div>
      <div class="message-block">
        <div class="w-100%" v-html="marked.parse(item.content)"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { marked } from 'marked'
  import { reactive, ref } from 'vue'

  import { MessageRecords } from '../../types/index'

  const props = defineProps<{
    messageRecords: MessageRecords[]
    name: string
  }>()
</script>

<style lang="less" scoped>
  .chat-gpt-records {
    padding: 16px 32px;
    height: 100%;
    // width: 100%;

    .message-item {
      display: flex;
      margin-bottom: 20px;
      max-width: 994px;
      color: @text01;
      gap: 0 8px;

      .message-block {
        padding: 16px 20px;
        // display: flex;
        // max-width: 994px;
        line-height: 1.5;
      }

      .avatar {
        margin: 8px 0;
      }

      .name {
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        background: #002b40;
        border-radius: 8px;
        line-height: 22px;
      }
    }

    .user {
      // justify-content: flex-start;
      flex-direction: row-reverse;

      .message-block {
        // padding: 16px 20px;
        background-color: @mask3;
        border-radius: 12px 0 12px 12px;
      }
    }

    .gpt {
      // justify-content: flex-start;

      .message-block {
        // padding: 16px 20px;
        background-color: rgba(247, 248, 250, 1);
        border-radius: 0 12px 12px;
      }
    }
  }
</style>
